<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24">
        <table class="operate-table" style="margin-left: 1px;margin-right: 0px;width: 99.7%;border-radius: 0.5em;border-collapse: collapse;padding: 0;">
          <caption style="font-weight: bold;font-size: 20px;background-color: #bfefff;line-height: 35px;">1#风机 </caption>
          <tbody >
          <tr>
            <td style="background-color:  #dcdcdc;font-weight:bold;">电流</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">回水流量1</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">回水流量2</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">进水管压力1</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">进水管压力2</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">风门开度</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">出口压力</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">风罩内废弃压力</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">风罩内废弃温度</td>
          </tr>
          <tr >
            <td >{{decimal(realTimeData.elecCurr1,1)}}</td>
            <td >{{decimal(realTimeData.reWaterFlow1A,1)}}</td>
            <td > {{decimal(realTimeData.reWaterFlow1B,1)}}</td>
            <td > {{decimal(realTimeData.inWaterFlow1A,1)}}</td>
            <td > {{decimal(realTimeData.inWaterFlow1B,1)}}</td>
            <td >{{decimal(realTimeData.doorOpen1,1)}}</td>
            <td > {{decimal(realTimeData.outPressure1,1)}}</td>
            <td > {{decimal(realTimeData.abanPressure1,1)}}</td>
            <td > {{decimal(realTimeData.abanTemp1,1)}}</td>
          </tr>
          <tr >
          </tr>

          </tbody>
        </table>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24">
        <table class="operate-table" style="margin-left: 1px;margin-right: 0px;width: 99.7%;border-radius: 0.5em;border-collapse: collapse;padding: 0;">
          <caption style="font-weight: bold;font-size: 20px;background-color: #bfefff;line-height: 35px;">2#风机 </caption>
          <tbody >
          <tr>
            <td style="background-color:  #dcdcdc;font-weight:bold;">电流</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">回水流量1</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">回水流量2</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">进水管压力1</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">进水管压力2</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">风门开度</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">出口压力</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">风罩内废弃压力</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">风罩内废弃温度</td>
          </tr>
          <tr >
            <td >{{decimal(realTimeData.elecCurr2,1)}}</td>
            <td >{{decimal(realTimeData.reWaterFlow2A,1)}}</td>
            <td > {{decimal(realTimeData.reWaterFlow2B,1)}}</td>
            <td > {{decimal(realTimeData.inWaterFlow2A,1)}}</td>
            <td > {{decimal(realTimeData.inWaterFlow2B,1)}}</td>
            <td >{{decimal(realTimeData.doorOpen2,1)}}</td>
            <td > {{decimal(realTimeData.outPressure2,1)}}</td>
            <td > {{decimal(realTimeData.abanPressure2,1)}}</td>
            <td > {{decimal(realTimeData.abanTemp2,1)}}</td>
          </tr>
          <tr >
          </tr>

          </tbody>
        </table>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24">
        <table class="operate-table" style="margin-left: 1px;margin-right: 0px;width: 99.7%;border-radius: 0.5em;border-collapse: collapse;padding: 0;">
          <caption style="font-weight: bold;font-size: 20px;background-color: #bfefff;line-height: 35px;">3#风机 </caption>
          <tbody >
          <tr>
            <td style="background-color:  #dcdcdc;font-weight:bold;">电流</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">回水流量1</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">回水流量2</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">进水管压力1</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">进水管压力2</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">风门开度</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">出口压力</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">风罩内废弃压力</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">风罩内废弃温度</td>
          </tr>
          <tr >
            <td >{{decimal(realTimeData.elecCurr3,1)}}</td>
            <td >{{decimal(realTimeData.reWaterFlow3A,1)}}</td>
            <td > {{decimal(realTimeData.reWaterFlow3B,1)}}</td>
            <td > {{decimal(realTimeData.inWaterFlow3A,1)}}</td>
            <td > {{decimal(realTimeData.inWaterFlow3B,1)}}</td>
            <td >{{decimal(realTimeData.doorOpen3,1)}}</td>
            <td > {{decimal(realTimeData.outPressure3,1)}}</td>
            <td > {{decimal(realTimeData.abanPressure3,1)}}</td>
            <td > {{decimal(realTimeData.abanTemp3,1)}}</td>
          </tr>
          <tr >
          </tr>

          </tbody>
        </table>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24">
        <table class="operate-table" style="margin-left: 1px;margin-right: 0px;width: 99.7%;border-radius: 0.5em;border-collapse: collapse;padding: 0;">
          <caption style="font-weight: bold;font-size: 20px;background-color: #bfefff;line-height: 35px;">4#风机 </caption>
          <tbody >
          <tr>
            <td style="background-color:  #dcdcdc;font-weight:bold;">电流</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">回水流量1</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">回水流量2</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">进水管压力1</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">进水管压力2</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">风门开度</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">出口压力</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">风罩内废弃压力</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">风罩内废弃温度</td>
          </tr>
          <tr >
            <td >{{decimal(realTimeData.elecCurr4,1)}}</td>
            <td >{{decimal(realTimeData.reWaterFlow4A,1)}}</td>
            <td > {{decimal(realTimeData.reWaterFlow4B,1)}}</td>
            <td > {{decimal(realTimeData.inWaterFlow4A,1)}}</td>
            <td > {{decimal(realTimeData.inWaterFlow4B,1)}}</td>
            <td >{{decimal(realTimeData.doorOpen4,1)}}</td>
            <td > {{decimal(realTimeData.outPressure4,1)}}</td>
            <td > {{decimal(realTimeData.abanPressure4,1)}}</td>
            <td > {{decimal(realTimeData.abanTemp4,1)}}</td>
          </tr>
          <tr >
          </tr>

          </tbody>
        </table>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24">
        <table class="operate-table" style="margin-left: 1px;margin-right: 0px;width: 99.7%;border-radius: 0.5em;border-collapse: collapse;padding: 0;">
          <caption style="font-weight: bold;font-size: 20px;background-color: #bfefff;line-height: 35px;">5#风机 </caption>
          <tbody >
          <tr>
            <td style="background-color:  #dcdcdc;font-weight:bold;">电流</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">回水流量1</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">回水流量2</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">进水管压力1</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">进水管压力2</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">风门开度</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">出口压力</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">风罩内废弃压力</td>
            <td style="background-color:  #dcdcdc;font-weight:bold;">风罩内废弃温度</td>
          </tr>
          <tr >
            <td >{{decimal(realTimeData.elecCurr5,1)}}</td>
            <td >{{decimal(realTimeData.reWaterFlow5A,1)}}</td>
            <td > {{decimal(realTimeData.reWaterFlow5B,1)}}</td>
            <td > {{decimal(realTimeData.inWaterFlow5A,1)}}</td>
            <td > {{decimal(realTimeData.inWaterFlow5B,1)}}</td>
            <td >{{decimal(realTimeData.doorOpen5,1)}}</td>
            <td > {{decimal(realTimeData.outPressure5,1)}}</td>
            <td > {{decimal(realTimeData.abanPressure5,1)}}</td>
            <td > {{decimal(realTimeData.abanTemp5,1)}}</td>
          </tr>
          <tr >
          </tr>

          </tbody>
        </table>
      </el-col>
    </el-row>



  </div>

</template>

<script>
  import { getEnergyChartAll } from "@/api/app/energy/pwater";
  import * as echarts from 'echarts'
  import {getRealDataByTags, getColdDataNow} from "@/api/app/plc/cache";

    export default {
        name: "cold",
      data() {
        return {
          timer: null,
          realTimeData: {
              elecCurr1:0,//
              reWaterFlow1A:0,//
              reWaterFlow1B:0,//
              inWaterFlow1A:0,
              inWaterFlow1B:0,
              doorOpen1:0,
              outPressure1:0,
              abanPressure1:0,
              abanTemp1:0,

            elecCurr2:0,//
            reWaterFlow2A:0,//
            reWaterFlow2B:0,//
            inWaterFlow2A:0,
            inWaterFlow2B:0,
            doorOpen2:0,
            outPressure2:0,
            abanPressure2:0,
            abanTemp2:0,

            elecCurr3:0,//
            reWaterFlow3A:0,//
            reWaterFlow3B:0,//
            inWaterFlow3A:0,
            inWaterFlow3B:0,
            doorOpen3:0,
            outPressure3:0,
            abanPressure3:0,
            abanTemp3:0,

            elecCurr4:0,//
            reWaterFlow4A:0,//
            reWaterFlow4B:0,//
            inWaterFlow4A:0,
            inWaterFlow4B:0,
            doorOpen4:0,
            outPressure4:0,
            abanPressure4:0,
            abanTemp4:0,

            elecCurr5:0,//
            reWaterFlow5A:0,//
            reWaterFlow5B:0,//
            inWaterFlow5A:0,
            inWaterFlow5B:0,
            doorOpen5:0,
            outPressure5:0,
            abanPressure5:0,
            abanTemp5:0,


          },
          chartHeight: 250
        }

      },
      mounted() {
        window.onresize = () => {
          return (() => {
            this.chartHeight = (window.innerHeight -250)/2  + "px";
          })();
        };

        // this.drawChart();
        this.realColdTimeInfo()
        this.timer = setInterval(() => {
          this.realColdTimeInfo()
        }, 1000)
      },
      beforeDestroy() {
        this.timer && clearInterval(this.timer)
        this.timer=null;
      },
      methods: {
        decimal(number, digit) {
          return parseFloat(parseFloat(number).toFixed(digit))
        },
        realColdTimeInfo(){
          getColdDataNow().then(res =>{
            //console.log("res "+res.data);
            this.realTimeData = res.data
          })
        },
      }

    }
</script>


<style lang="scss"  scoped>
  .param-title{
    height:30px;
    font-size: 16px;
    display:flex;
    align-items:center;
    justify-content: center;
  }

  ::v-deep .dividerStyle{
    background-color: #ffffff;
    margin: 4px 0!important;
  }
  .el-card ::v-deep .el-card__header {

    //padding: 15px 10px;
    background-color: #bfefff;// #b0e0e6;
    //color: #1c84c6;
    //height: 0px !important;
    font-weight: bold;
    font-size: 24px;
    //line-height: 1px;
  }

  .el-card ::v-deep .el-card__body {
    padding: 2px 1px;
    //background-color: palegoldenrod;
  }

  ::v-deep td{
    //padding: 0px 0;
    text-align: center;
    //font-size: 16px;
  }



  /* 表头内容如何居中 */
  ::v-deep .el-table th.el-table__cell>.cell {
    padding: 0 0;

  }

  /* 表格内容如何居中 */
  ::v-deep .el-table td.el-table__cell div {
    text-align: center;
    padding: 0 0;
  }
  ::v-deep.operate-table td {
    font-size: 14px;
    text-align: center;

    font-family: 宋体, Arial;
    border: 1px solid black;
    border-color: #CFCFCF;
    color: #000000;
    padding: 3px ;
    ::v-deep.alt {
      background: #F5FAFA;
      color: #797268;
    }

  }
  ::v-deep.operate-table tr {
    height: 30px;

  }

  ::v-deep.operate-table  tbody {
    margin:0  auto;
    width: 100%;
  }
</style>
